<template>
<div class="login_container">
  <el-card shadow="never" class="box-card">
    <template #header>
      <div class="card-header">
        <span>登录</span>
      </div>
    </template>
    <el-form  
    ref="ruleFormRef"
    :model="ruleForm" 
    :rules="rules"
    :size="formSize"
    class="demo-form-inline">
    <el-form-item label="账号"  prop="username">
      <el-input v-model="ruleForm.username" placeholder="请输入账号" clearable />
    </el-form-item>
    <el-form-item label="密码"  prop="passworld">
      <el-input v-model="ruleForm.passworld" placeholder="请输入密码" clearable />
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</div>
</template>
<script setup lang="ts">
import { reactive,ref} from 'vue'
import api from '../api/http'
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {useRouter} from 'vue-router'
// import {router} from '../router'
// import {useControlStore} from '../pinia/loginController'
import {useUserStore} from '../pinia/user'
// import type {UserToken} from '../view_type'
const router = useRouter()
// const store2 =useControlStore()
const store1 = useUserStore()   
interface RuleForm {
  username:string,
  passworld:string
}
interface UserToken {
      username:string,
      token:string
}
const formSize = ref('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: 'wangwu',
  passworld:'fsff'
})
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '请输入正确的名字', trigger: 'blur' },
  ],
  passworld: [
    {required: true, message: '请输入正确密码',trigger: 'change' },
    { min: 3, max: 6, message: '密码长度3-6位', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate( async (valid, fields) => {
    if (valid) {

      // 请求token
        const res:UserToken =await api.getTokenInfo(ruleForm.username)
        console.log(res)

       // 存放token 
        store1.LOGIN_IN(res);
        // store2.FETCH_PERMISSION()
        // console.log(router.getRoutes())
      ElMessage({
         message: '登录成功',
          type: 'success', })
      router.push('/')

    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style>
.login_container{
  height: 100%;
  width: 100%;
  position:relative;
}
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.box-card {
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 580px;
}
/* .btn .el-form-item__content{
  text-align: center;
} */
.el-form{
  padding: 30px;
}
</style>
